<DocMatToast></DocMatToast>
<DocMatToastContainer></DocMatToastContainer>

<div class="mat-elevation-z5 mat-layout-grid mdc-theme--surface">
    <div class="mat-layout-grid-inner-span-12">
        <h2 class="mat-h2">Installation</h2>

        <h3>Dependency injection configuration</h3>
        <h5>1. Startup.cs</h5>
        <p>Add <i>using MatBlazor;</i> and then in the ConfiguresServices method include services.AddMatToaster...</p>
        <pre class="code">
            <code>
                using MatBlazor;
                services.AddMatToaster(config =>
                {
                    config.Position = MatToastPosition.BottomRight;
                    config.PreventDuplicates = true;
                    config.NewestOnTop = true;
                    config.ShowCloseButton = true;
                    config.MaximumOpacity = 95;
                    config.VisibleStateDuration = 3000;
                });
            </code>
        </pre>
        <h3>MatToasterContainer component</h3>
        <h5>2. App.razor</h5>
        <p>
            The toast container must be added to the App.razor component or to another component always loaded in the application like MainLayout.razor.
            It is important to have exactly one instance of this component rendered in the application tree at any given time.
        </p>
        <pre class="code">
            <code>
                &lt;MatToastContainer /&gt;
            </code>
        </pre>
        <h3>Usage</h3>
        <h5>3. Code</h5>
        <p>In a component:</p>
        <pre class="code">
            <code>
                @@inject IMatToaster Toaster
            </code>
        </pre>
        <p>In a class:</p>
        <pre class="code">
            <code>
                [Inject]
                protected IMatToaster Toaster { get; set; }
            </code>
        </pre>
        <p>Then call the display method:</p>
        <pre class="code">
            <code>
                Toaster.Add("Toast body text","Toast title", "code");
            </code>
        </pre>
    </div>
</div>

<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>
        @inject IMatToaster Toaster

        <div class="mat-layout-grid">
            <div class="mat-layout-grid-inner">
                <div class="mat-layout-grid-cell">
                    <h3>Data</h3>
                    <p>
                        <MatTextField Label="Title" @bind-Value="_title"></MatTextField>
                    </p>
                    <p>
                        <MatTextField Label="Message" @bind-Value="_message"></MatTextField>
                    </p>
                </div>
                <div class="mat-layout-grid-cell">
                    <h3>Actions</h3>
                    <MatButton Raised="true" Class="mdc-toast-danger" OnClick="@(() => Show(MatToastType.Danger))">Danger</MatButton>
                    <MatButton Raised="true" Class="mdc-toast-dark" OnClick="@(() => Show(MatToastType.Dark, "accessible"))">Dark</MatButton>
                    <MatButton Raised="true" Class="mdc-toast-info" OnClick="@(() => Show(MatToastType.Info))">Info</MatButton>
                    <MatButton Raised="true" Class="mdc-toast-light" OnClick="@(() => Show(MatToastType.Light))">Light</MatButton>
                    <MatButton Raised="true" Class="mdc-toast-link" OnClick="@(() => Show(MatToastType.Link, "link"))">Link</MatButton>
                    <MatButton Raised="true" Class="mdc-toast-primary" OnClick="@(() => Show(MatToastType.Primary))">Primary</MatButton>
                    <MatButton Raised="true" Class="mdc-toast-secondary" OnClick="@(() => Show(MatToastType.Secondary))">Secondary</MatButton>
                    <MatButton Raised="true" Class="mdc-toast-success" OnClick="@(() => Show(MatToastType.Success))">Success</MatButton>
                    <MatButton Raised="true" Class="mdc-toast-warning" OnClick="@(() => Show(MatToastType.Warning))">Warning</MatButton>

                </div>
                <div class="mat-layout-grid-cell">
                    <h3>Toast transitions</h3>
                    <p>
                        <MatTextField Label="Show duration" Type="number" @bind-Value="_showTransitionDuration"></MatTextField>
                    </p>
                    <p>
                        <MatTextField Label="Visible duration" Type="number" @bind-Value="_visibleStateDuration"></MatTextField>
                    </p>
                    <p>
                        <MatTextField Label="Hide duration" Type="number" @bind-Value="_hideTransitionDuration"></MatTextField>
                    </p>
                </div>
                <div class="mat-layout-grid-cell">
                    <h3>General options</h3>
                    <p>
                        <MatSelect Label="Position" @bind-Value="@_toastPosition">
                            @foreach (var enumName in Enum.GetNames(typeof(MatToastPosition)))
                            {
                                <MatOption Value="@enumName">@enumName</MatOption>
                            }

                        </MatSelect>
                    </p>
                    <p>
                        <MatTextField Label="Max visible toasts" Type="number" @bind-Value="_maxDisplayedToasts"></MatTextField>
                    </p>
                    <p>
                        <MatCheckbox Label="Newest on Top" @bind-Value="@Toaster.Configuration.NewestOnTop"></MatCheckbox>
                    </p>
                    <p>
                        <MatCheckbox Label="Prevent duplicates" @bind-Value="@Toaster.Configuration.PreventDuplicates"></MatCheckbox>
                    </p>
                </div>
                <div class="mat-layout-grid-cell">
                    <h3>Toast options</h3>
                    <p>
                        <MatTextField Label="Max opacity (%)" Type="number" @bind-Value="_maximumOpacity"></MatTextField>
                    </p>
                    <p>
                        <MatCheckbox Label="Require interaction" @bind-Value="@_requireInteraction"></MatCheckbox>
                    </p>
                    <p>
                        <MatCheckbox Label="Progress bar" @bind-Value="@_showProgressBar"></MatCheckbox>
                    </p>
                    <p>
                        <MatCheckbox Label="Close Button" @bind-Value="@_showCloseButton"></MatCheckbox>
                    </p>
                    <p>
                        <MatCheckbox Label="Action on click (message in console)" @bind-Value="@_actionOnClick"></MatCheckbox>
                    </p>
                </div>
            </div>
        </div>


        @code {
            private string _title = "Test Title";
            private string _message = "Test Message";
            private bool _showProgressBar;
            private bool _showCloseButton;
            private bool _actionOnClick;
            private string _maximumOpacity;

            private string _showTransitionDuration;
            private string _visibleStateDuration;
            private string _hideTransitionDuration;

            private bool _requireInteraction;

            public string _maxDisplayedToasts
            {
                get { return Toaster.Configuration.MaxDisplayedToasts.ToString(); }
                set { Toaster.Configuration.MaxDisplayedToasts = Convert.ToInt32(value); }
            }


            private string _toastPosition
            {
                get { return Toaster.Configuration.Position.ToString(); }
                set { Toaster.Configuration.Position = (MatToastPosition)Enum.Parse(typeof(MatToastPosition), value); }
            }

            protected override void OnInitialized()
            {
                _showProgressBar = Toaster.Configuration.ShowProgressBar;
                _showCloseButton = Toaster.Configuration.ShowCloseButton;
                _maximumOpacity = Toaster.Configuration.MaximumOpacity.ToString();

                _showTransitionDuration = Toaster.Configuration.ShowTransitionDuration.ToString();
                _visibleStateDuration = Toaster.Configuration.VisibleStateDuration.ToString();
                _hideTransitionDuration = Toaster.Configuration.HideTransitionDuration.ToString();

                _requireInteraction = Toaster.Configuration.RequireInteraction;
            }

            public void Show(MatToastType type, string icon = "")
            {
                Toaster.Add(_message, type, _title, icon, config =>
                {
                    config.ShowCloseButton = _showCloseButton;
                    config.ShowProgressBar = _showProgressBar;
                    config.MaximumOpacity = Convert.ToInt32(_maximumOpacity);

                    config.ShowTransitionDuration = Convert.ToInt32(_showTransitionDuration);
                    config.VisibleStateDuration = Convert.ToInt32(_visibleStateDuration);
                    config.HideTransitionDuration = Convert.ToInt32(_hideTransitionDuration);

                    config.RequireInteraction = _requireInteraction;

                    if (_actionOnClick)
                    {
                        config.Onclick = toast =>
                        {
                            Console.WriteLine($"Title: \"{toast.Title}\"; message: \"{toast.Message}\"; Type: {toast.Options.Type}");
                            return Task.CompletedTask;
                        };
                    }
                });
            }
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        @inject IMatToaster Toaster

        <div class=""mat-layout-grid"">
            <div class=""mat-layout-grid-inner"">
                <div class=""mat-layout-grid-cell"">
                    <h3>Data</h3>
                    <p>
                        <MatTextField Label=""Title"" @bind-Value=""_title""></MatTextField>
                    </p>
                    <p>
                        <MatTextField Label=""Message"" @bind-Value=""_message""></MatTextField>
                    </p>
                </div>
                <div class=""mat-layout-grid-cell"">
                    <h3>Actions</h3>
                    <MatButton Raised=""true"" Class=""mdc-toast-danger"" OnClick=""@(() => Show(MatToastType.Danger))"">Danger</MatButton>
                    <MatButton Raised=""true"" Class=""mdc-toast-dark"" OnClick=""@(() => Show(MatToastType.Dark, ""accessible""))"">Dark</MatButton>
                    <MatButton Raised=""true"" Class=""mdc-toast-info"" OnClick=""@(() => Show(MatToastType.Info))"">Info</MatButton>
                    <MatButton Raised=""true"" Class=""mdc-toast-light"" OnClick=""@(() => Show(MatToastType.Light))"">Light</MatButton>
                    <MatButton Raised=""true"" Class=""mdc-toast-link"" OnClick=""@(() => Show(MatToastType.Link, ""link""))"">Link</MatButton>
                    <MatButton Raised=""true"" Class=""mdc-toast-primary"" OnClick=""@(() => Show(MatToastType.Primary))"">Primary</MatButton>
                    <MatButton Raised=""true"" Class=""mdc-toast-secondary"" OnClick=""@(() => Show(MatToastType.Secondary))"">Secondary</MatButton>
                    <MatButton Raised=""true"" Class=""mdc-toast-success"" OnClick=""@(() => Show(MatToastType.Success))"">Success</MatButton>
                    <MatButton Raised=""true"" Class=""mdc-toast-warning"" OnClick=""@(() => Show(MatToastType.Warning))"">Warning</MatButton>

                </div>
                <div class=""mat-layout-grid-cell"">
                    <h3>Toast transitions</h3>
                    <p>
                        <MatTextField Label=""Show duration"" Type=""number"" @bind-Value=""_showTransitionDuration""></MatTextField>
                    </p>
                    <p>
                        <MatTextField Label=""Visible duration"" Type=""number"" @bind-Value=""_visibleStateDuration""></MatTextField>
                    </p>
                    <p>
                        <MatTextField Label=""Hide duration"" Type=""number"" @bind-Value=""_hideTransitionDuration""></MatTextField>
                    </p>
                </div>
                <div class=""mat-layout-grid-cell"">
                    <h3>General options</h3>
                    <p>
                        <MatSelect Label=""Position"" @bind-Value=""@_toastPosition"">
                            @foreach (var enumName in Enum.GetNames(typeof(MatToastPosition)))
                            {
                                <MatOption Value=""@enumName"">@enumName</MatOption>
                            }

                        </MatSelect>
                    </p>
                    <p>
                        <MatTextField Label=""Max visible toasts"" Type=""number"" @bind-Value=""_maxDisplayedToasts""></MatTextField>
                    </p>
                    <p>
                        <MatCheckbox Label=""Newest on Top"" @bind-Value=""@Toaster.Configuration.NewestOnTop""></MatCheckbox>
                    </p>
                    <p>
                        <MatCheckbox Label=""Prevent duplicates"" @bind-Value=""@Toaster.Configuration.PreventDuplicates""></MatCheckbox>
                    </p>
                </div>
                <div class=""mat-layout-grid-cell"">
                    <h3>Toast options</h3>
                    <p>
                        <MatTextField Label=""Max opacity (%)"" Type=""number"" @bind-Value=""_maximumOpacity""></MatTextField>
                    </p>
                    <p>
                        <MatCheckbox Label=""Require interaction"" @bind-Value=""@_requireInteraction""></MatCheckbox>
                    </p>
                    <p>
                        <MatCheckbox Label=""Progress bar"" @bind-Value=""@_showProgressBar""></MatCheckbox>
                    </p>
                    <p>
                        <MatCheckbox Label=""Close Button"" @bind-Value=""@_showCloseButton""></MatCheckbox>
                    </p>
                    <p>
                        <MatCheckbox Label=""Action on click (message in console)"" @bind-Value=""@_actionOnClick""></MatCheckbox>
                    </p>
                </div>
            </div>
        </div>


        @code {
            private string _title = ""Test Title"";
            private string _message = ""Test Message"";
            private bool _showProgressBar;
            private bool _showCloseButton;
            private bool _actionOnClick;
            private string _maximumOpacity;

            private string _showTransitionDuration;
            private string _visibleStateDuration;
            private string _hideTransitionDuration;

            private bool _requireInteraction;

            public string _maxDisplayedToasts
            {
                get { return Toaster.Configuration.MaxDisplayedToasts.ToString(); }
                set { Toaster.Configuration.MaxDisplayedToasts = Convert.ToInt32(value); }
            }


            private string _toastPosition
            {
                get { return Toaster.Configuration.Position.ToString(); }
                set { Toaster.Configuration.Position = (MatToastPosition)Enum.Parse(typeof(MatToastPosition), value); }
            }

            protected override void OnInitialized()
            {
                _showProgressBar = Toaster.Configuration.ShowProgressBar;
                _showCloseButton = Toaster.Configuration.ShowCloseButton;
                _maximumOpacity = Toaster.Configuration.MaximumOpacity.ToString();

                _showTransitionDuration = Toaster.Configuration.ShowTransitionDuration.ToString();
                _visibleStateDuration = Toaster.Configuration.VisibleStateDuration.ToString();
                _hideTransitionDuration = Toaster.Configuration.HideTransitionDuration.ToString();

                _requireInteraction = Toaster.Configuration.RequireInteraction;
            }

            public void Show(MatToastType type, string icon = """")
            {
                Toaster.Add(_message, type, _title, icon, config =>
                {
                    config.ShowCloseButton = _showCloseButton;
                    config.ShowProgressBar = _showProgressBar;
                    config.MaximumOpacity = Convert.ToInt32(_maximumOpacity);

                    config.ShowTransitionDuration = Convert.ToInt32(_showTransitionDuration);
                    config.VisibleStateDuration = Convert.ToInt32(_visibleStateDuration);
                    config.HideTransitionDuration = Convert.ToInt32(_hideTransitionDuration);

                    config.RequireInteraction = _requireInteraction;

                    if (_actionOnClick)
                    {
                        config.Onclick = toast =>
                        {
                            Console.WriteLine($""Title: \""{toast.Title}\""; message: \""{toast.Message}\""; Type: {toast.Options.Type}"");
                            return Task.CompletedTask;
                        };
                    }
                });
            }
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>
